<template>
  <div>
    <!-- 导出记录弹窗 -->
    <el-dialog title="导出记录" :visible.sync="exportRecordDialogVisible" width="80%" :before-close="handleExportRecordClose">
      <el-table :data="exportRecords" border style="width: 100%">
        <el-table-column prop="id" label="记录ID" width="80"></el-table-column>
        <el-table-column prop="username" label="用户名" width="120"></el-table-column>
        <el-table-column prop="export_time" label="导出时间" width="180"></el-table-column>
        <el-table-column prop="syNumbers" label="试样号">
          <template slot-scope="scope">
            <span v-if="scope.row.syNumbers">{{ scope.row.syNumbers.join(', ') }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="dateOption" label="日期选项">
          <template slot-scope="scope">
            <span v-if="scope.row.dateOption">{{ scope.row.dateOption.join(' 至 ') }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="fileNames" label="文件名">
          <template slot-scope="scope">
            <span v-if="scope.row.fileNames">{{ scope.row.fileNames.join(', ') }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="exportRecordDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <el-table :data="tableList" border style="width: 100%" height="100%">
      <el-table-column label="用户名"  prop="username" align="center">
      </el-table-column>
      <el-table-column label="手机号" width="170" prop="phone" align="center">
      </el-table-column>
      <el-table-column label="邮箱" width="230" prop="email" align="center">
      </el-table-column>
      <el-table-column label="最近登录时间" width="180" prop="login_time" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.loginTime || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户状态" width="120" prop="status" align="center">
<!--      status为0启用 为1禁用-->
        <template slot-scope="scope">
          <div v-show="scope.row.status === 0" class="el-icon-success" style="color: #4def7f">正常</div>
          <div v-show="scope.row.status === 1" class="el-icon-warning" style="color: #f12651">禁用</div>
        </template>
      </el-table-column>
      <el-table-column label="操作"  align="center">
        <template slot-scope="scope">
          <el-button size="mini" icon="el-icon-success" v-show="scope.row.status === 1" plain type="success" @click="editSubInfoStatus(scope.row.id)">启用</el-button>
          <el-button size="mini" icon="el-icon-error" v-show="scope.row.status === 0" plain type="warning" @click="editSubInfoStatus(scope.row.id)">禁用</el-button>
          <el-button size="mini" icon="el-icon-refresh" type="primary" plain @click="subInfoResetPwd(scope.row.id)">重置密码</el-button>
          <el-button size="mini" icon="el-icon-document" type="primary" plain @click="showExportRecords(scope.row)">导出记录</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getSubUserInfoList ,editSubInfoStatus,subInfoResetPwd, getUserExportRecords} from "@/api/system/user";

export default {
  props: {
    user: {
      type: Object
    }
  },
  created() {
    this.getList();
  },
  data() {
    return {
      tableList:[],
      exportRecordDialogVisible: false,
      exportRecords: [],
      currentUserId: null
    };
  },
  watch: {

  },
  methods: {
    getList() {
      getSubUserInfoList().then(response => {
        this.tableList = response.data;
      });
    },
    editSubInfoStatus(id){
      editSubInfoStatus(id).then(response => {
        this.$message.success('操作成功');
        this.getList();
      });
    },
    subInfoResetPwd(id){
      subInfoResetPwd(id).then(response => {
        this.$message.success('重置密码成功，默认密码123456');
      });
    },

    // 提供给父组件调用的刷新方法
    refresh() {
      this.getList();
    },

    // 显示用户的导出记录
    showExportRecords(user) {
      this.currentUserId = user.id;
      getUserExportRecords(user.id).then(response => {
        if (response.success) {
          // 解析数据中的字符串字段
          this.exportRecords = response.data.map(record => {
            return {
              ...record,
              syNumbers: record.syNumbers ? record.syNumbers.split(',') : [],
              dateOption: record.dateOption ? record.dateOption.split(',') : [],
              fileNames: record.fileNames ? record.fileNames.split(',') : []
            };
          });
          this.exportRecordDialogVisible = true;
        } else {
          this.$message.error(response.message || '查询导出记录失败');
        }
      }).catch(error => {
        this.$message.error('查询导出记录失败: ' + error.message);
      });
    },

    // 关闭导出记录弹窗
    handleExportRecordClose() {
      this.exportRecordDialogVisible = false;
      this.exportRecords = [];
      this.currentUserId = null;
    }
  }
};
</script>
